<%--
  Created by IntelliJ IDEA.
  User: HTF
  Date: 2018/6/27
  Time: 10:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>数据上报</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <jsp:include page="base.jsp"/>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
            font-family: "微软雅黑";
            font-size: 16px;
        }

        .form-control, .input-group-addon {
            border: 1px dashed #ff0000;
        }

        .textinput {
            resize: none;
        }

        .add_cl {
            margin-bottom: 15px;
        }

        .display {
            display: none;
        }

        .buttongroup {
            text-align: center;
        }

        .hr {
            height: 1px;
            background-color: #cacaca;
        }

        .inputselect {
            border-bottom: none;
        }

        .bottomDiv {
            height: 35px;
            width: 100%;
        }

    </style>
</head>
<body>
<div class="container">
    <form action="getData" method="post">
        <div class="form-group">
            <label for="area">所属地市局</label>
            <select class="form-control" id="area" name="city">
                <option>请选择</option>
                <option value="1">阿克苏传输分局</option>
                <option value="2">阿勒泰传输分局</option>
                <option value="3">巴州传输分局</option>
                <option value="4">博乐传输分局</option>
                <option value="5">昌吉传输分局</option>
                <option value="6">哈密传输分局</option>
                <option value="7">和田传输分局</option>
                <option value="8">喀什传输分局</option>
                <option value="9">克拉玛依传输分局</option>
                <option value="10">克州传输分局</option>
                <option value="11">奎屯传输分局</option>
                <option value="12">石河子传输分局</option>
                <option value="13">塔城传输分局</option>
                <option value="14">吐鲁番传输分局</option>
                <option value="15">乌鲁木齐传输分局</option>
                <option value="16">伊犁传输分局</option>
            </select>
        </div>
        <div class="form-group">
            <label for="whz">本地网中心/维护站</label>
            <select class="form-control" id="whz" name="whz">
                <option>请选择</option>
            </select>
        </div>
        <div class="form-group">
            <label for="dgID">工单编号(只有政企和交换)</label>
            <input type="number" class="form-control" id="dgID" placeholder="工单编号" name="gdId" pattern="[0-9]{*}">
        </div>

        <div class="form-group">
            <label for="zaXz">障碍性质</label>
            <select class="form-control" id="zaXz" name="zaxz">
                <option>请选择</option>
                <option value="本地城域网配线光缆故障">本地城域网配线光缆故障</option>
                <option value="本地城域网障碍">本地城域网障碍</option>
                <option value="二级支线障碍">二级支线障碍</option>
            </select>
        </div>

        <div class="form-group">
            <label for="zaDl">障碍段落</label>
            <textarea class="form-control textinput" id="zaDl" rows="3" placeholder="障碍段落" name="zadl"></textarea>
        </div>

        <div class="form-group">
            <label for="zaReason">障碍原因</label>
            <textarea class="form-control textinput" id="zaReason" rows="3" placeholder="障碍原因"
                      name="zaReason"></textarea>
        </div>

        <div class="form-group">
            <label for="clDesc1">障碍详细过程描述1（确定光缆中断后传报第一次）</label>
            <textarea class="form-control textinput" id="clDesc1" rows="3" placeholder="处理描述1" name="desc1"></textarea>
        </div>

        <div class="form-group">
            <label for="clDesc2">障碍详细过程描述2（光缆开始接续后传报第二次）</label>
            <textarea class="form-control textinput" id="clDesc2" rows="3" placeholder="处理描述2" name="desc2"></textarea>
        </div>

        <div class="form-group">
            <label for="clDesc3">障碍详细过程描述3（业务恢复后传报第三次）</label>
            <textarea class="form-control textinput" id="clDesc3" rows="3" placeholder="处理描述3" name="desc3"></textarea>
        </div>

        <div class="form-group">
            <label for="zaHapDate">故障发生日期+时间</label>
            <div class="input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                <input type='datetime-local' class="form-control" id="zaHapDate" name="hapDate"
                       placeholder='请选择故障发生时间'/>
            </div>
        </div>

        <div class="form-group">
            <label for="zaRepDate">故障修复日期+时间</label>
            <div class="input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                <input type='datetime-local' class="form-control" id="zaRepDate" name="repDate"
                       placeholder='请选择故障修复时间'/>
            </div>
        </div>

        <div class="form-group">
            <label for="zaExpDate">障碍历时</label>
            <div class="input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                <input type='number' class="form-control" id="zaExpDate" name="length" pattern="[0-9]{*}"
                       placeholder='请输入故障修复历时'/>
                <span class="input-group-addon">分钟</span>
            </div>
        </div>

        <div class="form-group">
            <label for="isOutTime">是否超时</label>
            <select class="form-control" id="isOutTime" name="isOut">
                <option>请选择</option>
                <option value="是">是</option>
                <option value="否">否</option>
            </select>
        </div>

        <div class="form-group">
            <label for="csReason">超时原因</label>
            <textarea class="form-control textinput" id="csReason" rows="3" placeholder="超时原因"
                      name="outReason"></textarea>
        </div>

        <div class="form-group">
            <label for="zcUse">支撑单位使用情况</label>
            <textarea class="form-control textinput" id="zcUse" rows="3" placeholder="支撑单位使用情况" name="zcUse"></textarea>
        </div>

        <div class="form-group">
            <label for="rrmark">备注</label>
            <textarea class="form-control textinput" id="rrmark" rows="3" placeholder="备注" name="rrmark"></textarea>
        </div>


        <div class="form-group">
            <label for="xhglcl">消耗光缆材料</label>
            <div id="xhglcl">
                <div id='cl_GL0' class='add_cl'>
                    <div class="input-group">
                        <span class="input-group-addon inputselect">使用</span></span>
                        <select class="form-control inputselect" id="xhXS0" name="glType0">
                            <option>请选择</option>
                            <option value="4">4</option>
                            <option value="6">6</option>
                            <option value="8">8</option>
                            <option value="12">12</option>
                            <option value="24">24</option>
                            <option value="36">36</option>
                            <option value="48">48</option>
                            <option value="72">72</option>
                            <option value="96">96</option>
                            <option value="144">144</option>
                            <option value="216">216</option>
                            <option value="288">288</option>
                        </select>
                        <span class="input-group-addon inputselect">芯光缆</span>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">消耗</span></span>
                        <input type='number' class="form-control" id="xhMS0" name="glLength0" pattern="[0-9]{*}"
                               placeholder='请输入消耗光缆米数'/>
                        <span class="input-group-addon">米</span>
                    </div>
                </div>
            </div>

            <div class="buttongroup">
                <button type="button" class="btn btn-primary" id="btn_add_GL">
                    <span class="glyphicon glyphicon-plus"></span> 添加
                </button>
                <button type="button" class="btn btn-danger" id="btn_del_GL">
                    <span class="glyphicon glyphicon-remove"></span> 删除
                </button>
            </div>
        </div>
        <hr class="hr"/>
        <div class="form-group">
            <label for="xhjthcl">消耗接头盒材料</label>
            <div id="xhjthcl">
                <div id="cl_JTH0" class="add_cl">
                    <div class="input-group">
                        <span class="input-group-addon inputselect">使用</span></span>
                        <select class="form-control inputselect" id="xhJTH0" name="jthType0">
                            <option>请选择</option>
                            <option value="12">12</option>
                            <option value="24">24</option>
                            <option value="36">36</option>
                            <option value="48">48</option>
                            <option value="72">72</option>
                            <option value="96">96</option>
                            <option value="144">144</option>
                            <option value="216">216</option>
                            <option value="288">288</option>
                        </select>
                        <span class="input-group-addon inputselect">芯接头盒</span>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">消耗</span></span>
                        <input type='number' class="form-control" id="xhGS0" name="jthCount0" pattern="[0-9]{*}"
                               placeholder='请输入消耗接头盒个数'/>
                        <span class="input-group-addon">个</span>
                    </div>
                </div>
            </div>

            <div class="buttongroup">
                <button type="button" class="btn btn-primary" id="btn_add_JTH">
                    <span class="glyphicon glyphicon-plus"></span> 添加
                </button>
                <button type="button" class="btn btn-danger" id="btn_del_JTH">
                    <span class="glyphicon glyphicon-remove"></span> 删除
                </button>
            </div>
        </div>

        <div class="display buttomDiv">
            <input type="text" name="glCount" class="glCount" id="glCount">
            <input type="text" name="jthCount" class="jthCount" id="jthCount">
        </div>
        <div class="bottomDiv"></div>
        <button type="submit" class="btn btn-primary btn-block" id="submit">提交</button>
        <div class="bottomDiv"></div>
    </form>
</div>

<script type="text/javascript">

    dd.ready(function () {
        dd.biz.navigation.setLeft({
            control: true,//是否控制点击事件，true 控制，false 不控制， 默认false
            text: '退出',//控制显示文本，空字符串表示显示默认文本
            onSuccess: function (result) {
                dd.biz.navigation.close({
                    onSuccess: function (result) {
                    },
                    onFail: function (err) {
                    }
                });
            },
            onFail: function (err) {
            }
        });
    });


    $(document).ready(function () {
        $("#area").change(function () {
                $("#whz option:not(:first)").remove();
                var area = $('#area').val();
                var url = "getStation";
                if (area != null && area != "") {
                    var args = {"area": area/* ,"time":new Date() */};
                    $.getJSON(url, args, function (data) {
                        for (var i = 0; i < data.length; i++) {
                            var stationName = data[i].stationName;
                            $("#whz").append("<option value='" + stationName + "'>" + stationName + "</option>");
                        }
                    });
                }
            }
        );
        var index = 0;
        $("#btn_add_GL").click(function () {
            $("#xhglcl").append(function (n) {
                index++;
                return "<div id='cl_GL" + index + "' class='add_cl'> <div class='input-group'>" +
                    "<span class='input-group-addon inputselect'>使用</span></span>" +
                    "<select class='form-control inputselect' id='xhGL" + index + "' name='glType" + index + "'>" +
                    "<option>请选择</option>" +
                    "<option value='4'>4</option>" +
                    "<option value='6'>6</option>" +
                    "<option value='8'>8</option>" +
                    "<option value='12'>12</option>" +
                    "<option value='24'>24</option>" +
                    "<option value='36'>36</option>" +
                    "<option value='48'>48</option>" +
                    "<option value='72'>72</option>" +
                    "<option value='69'>69</option>" +
                    "<option value='144'>144</option>" +
                    "<option value='216'>216</option>" +
                    "<option value='288'>288</option>" +
                    "</select>" +
                    "<span class='input-group-addon inputselect'>芯光缆</span>" +
                    "</div>" +
                    "<div class='input-group'>" +
                    "<span class='input-group-addon'>消耗</span></span>" +
                    "<input type='number' class='form-control' id='xhMS" + index + "' name='glLength" + index + "' pattern='[0-9]{*}' placeholder='请输入消耗光缆米数'/>" +
                    "<span class='input-group-addon'>米</span>" +
                    "</div>" +
                    "</div>";
            });
        });

        var count = 0;
        $("#btn_add_JTH").click(function () {
            $("#xhjthcl").append(function (n) {
                count++;
                return "<div id='cl_JTH" + count + "' class='add_cl'> " +
                    "<div class='input-group'>" +
                    "<span class='input-group-addon inputselect'>使用</span></span>" +
                    "<select class='form-control inputselect' id='xhJTH" + count + "' name='jthType" + count + "'>" +
                    "<option>请选择</option>" +
                    "<option value='12'>12</option>" +
                    "<option value='24'>24</option>" +
                    "<option value='36'>36</option>" +
                    "<option value='48'>48</option>" +
                    "<option value='72'>72</option>" +
                    "<option value='69'>69</option>" +
                    "<option value='144'>144</option>" +
                    "<option value='216'>216</option>" +
                    "<option value='288'>288</option>" +
                    "</select>" +
                    "<span class='input-group-addon inputselect'>芯接头盒</span>" +
                    "</div>" +
                    "<div class='input-group'>" +
                    "<span class='input-group-addon'>消耗</span></span>" +
                    "<input type='number' class='form-control' id='xhGS" + count + "' name='jthCount" + count + "' pattern='[0-9]{*}' placeholder='请输入消耗接头盒个数'/>" +
                    "<span class='input-group-addon'>个</span>" +
                    "</div>" +
                    "</div>";
            });
        });

        $("#btn_del_GL").click(function () {
            var n = $("#xhglcl .add_cl").length;
            if (n > 1) {
                $("#xhglcl .add_cl").last().remove();
            }

        });

        $("#btn_del_JTH").click(function () {
            var m = $("#xhjthcl .add_cl").length;
            if (m > 1) {
                $("#xhjthcl .add_cl").last().remove();
            }

        });

        $("#submit").click(function () {
            var n = $("#xhglcl .add_cl").length;
            var m = $("#xhjthcl .add_cl").length;
            $("#glCount").val(n);
            $("#jthCount").val(m);
        });
    });
</script>
</body>
</html>
